<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <title>详情</title>
    <link rel="icon" href="./img/husky_tran.png" type="image/x-icon"/>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/detail.css">
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/facebook.css">
    <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--    <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <style>
        .button {
            --color: #e7e7e7;
            --color-hover: #e7e7e7;
            --color-active: #fff;
            --icon: #222529;
            --icon-hover: #275EFE;
            --icon-active: #fff;
            --background: #e7e7e7;
            --background-hover: #e7e7e7;
            --background-active: #275EFE;
            /*--shadow: rgba(0, 17, 119, 0.1);*/

            display: inline-block;
            outline: none;
            cursor: pointer;
            /*position: relative;*/
            border: 0;
            background: none;
            padding: 8px 12px 8px 22px;
            border-radius: 9px 0 0 9px;
            line-height: 27px;
            font-family: inherit;
            font-weight: 600;
            font-size: 14px;
            color: var(--color);
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s linear;
            -webkit-clip-path: inset(0px 4px 0px 0px);
        }

        .button:hover {
            --icon: var(--icon-hover);
            --color: var(--color-hover);
            --background: var(--background-hover);
        }

        .button:active {
            --scale: .95;
        }

        .button:not(.liked):hover {
            --hand-rotate: 8deg;
            --hand-thumb-1: -12deg;
            --hand-thumb-2: 36deg;
        }

        .button.liked {
            --span-x: 2px;
            --span-d-o: 1;
            --span-d-x: 0;
            --icon: var(--icon-active);
            --color: var(--color-active);
            --background: var(--background-active);
            --hand-name: hand;
        }

        .button:after {
            content: "";
            min-width: 10px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            transition: background 0.2s linear, transform 0.2s, box-shadow 0.2s linear;
            transform: scale(var(--scale, 1)) translateZ(0);
            background: var(--background);
            box-shadow: 0 4px 8px var(--shadow), 0 8px 20px var(--shadow);
        }

        .button .emitter {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateZ(-4px);
        }

        .button .emitter div {
            width: 6px;
            height: 6px;
            margin: -3px 0 0 -3px;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            /*background: var(--b, none);*/
        }

        .button .hand {
            width: 11px;
            height: 11px;
            border-radius: 2px 0 0 0;
            background: var(--icon);
            margin: 10px 8px 0 0;
            transform-origin: -5px -1px;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-rotate, 0deg)) translateZ(0);
            -webkit-animation: var(--hand-name, none) 0.5s linear;
            animation: var(--hand-name, none) 0.5s linear;
        }

        .button .hand:before, .button .hand:after {
            content: "";
            background: var(--icon);
            position: absolute;
            transition: background 0.2s linear, box-shadow 0.2s linear;
        }

        .button .hand:before {
            left: -5px;
            bottom: 0;
            height: 12px;
            width: 4px;
            border-radius: 1px 1px 0 1px;
        }

        .button .hand:after {
            right: -3px;
            top: 0;
            width: 4px;
            height: 4px;
            border-radius: 0 2px 2px 0;
            background: var(--icon);
            box-shadow: -0.5px 4px 0 var(--icon), -1px 8px 0 var(--icon), -1.5px 12px 0 var(--icon);
            transform: scaleY(0.6825);
            transform-origin: 0 0;
        }

        .button .hand .thumb {
            background: var(--icon);
            width: 10px;
            height: 4px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
        }

        .button .hand .thumb:before {
            content: "";
            height: 4px;
            width: 7px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            background: var(--icon);
            position: absolute;
            left: 7px;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
        }

        .button .hand,
        .button span {
            z-index: 1;
            position: relative;
            display: inline-block;
            vertical-align: top;
        }

        .button .hand span,
        .button span span {
            opacity: var(--span-d-o, 0);
            transition: transform 0.25s, opacity 0.2s linear;
            transform: translateX(var(--span-d-x, 4px)) translateZ(0);
        }

        .button > span {
            transition: transform 0.25s;
            transform: translateX(var(--span-x, 4px)) translateZ(0);
        }

        .background {
            position: fixed;
            margin-left: -20%;
            width: 100%;
            /*background: rgba(255, 255, 255, .3);*/
            /*height: auto;*/
            filter: blur(500px);
            z-index: -1;
        }

        body {
            /*background: #e7e7e7;*/
            /*background-image: url("./img/background.jpg");*/
            /*background-size: cover;*/
            /*filter: blur(20px);*/
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
        }

        h2 {
            font-family: "Avenir", serif;
            font-size: 36px;
            margin-bottom: 15px;
        }

        h3 {
            font-size: 24px;
            font-weight: 500;
            color: rgba(34, 34, 34, 0.5);

            margin-bottom: 25px;
            margin-top: 0;
        }

        h3,
        span,
        p {
            color: #8a8a8a;
            font-family: "Avenir";
        }

        .profile_container,
        .info,
        .back {
            margin: 60px 100px 0;
            max-width: 900px;
            display: flex;
            overflow-x: hidden;
        }

        .back {
            display: flex;
            align-items: center;
            color: rgba(34, 34, 34, 0.5);
        }

        .back i {
            margin-right: 15px;
        }

        .profile_img-LG {
            height: 400px;
            width: 300px;
            border-radius: 40px;

            object-fit: cover;
            object-position: 50% 50%;

            background-position: 40% 50%;
        }

        .flag_wrapper {
            width: 50px;
            height: 50px;
            background-color: #f2f2f2;
            border-radius: 100%;
            position: relative;
            top: -70px;
            left: 230px;
        }

        .flag {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto auto;
        }

        .score {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: large;
            font-weight: bold;
            color: #dc3545;
            font-family: "Avenir", serif;
        }

        .description {
            margin-bottom: 30px;
            margin-top: 0;
        }

        .profile_img_section {
            margin-right: 50px;
        }

        .profile_desc_section {
            display: flex;
            flex-direction: column;

            margin-left: 50px;
        }

        .interests_item {
            display: inline-block;
            padding: 5px 15px;
            margin-right: 7.5px;
            margin-bottom: 10px;
            line-height: 35px;
            background-color: #f2f2f2;
            border-radius: 5px;

            color: rgba(34, 34, 34, 0.5);
        }

        .info {
            margin-top: -20px;
            margin-left: 100px;
        }

        .link_img_wrapper {
            width: 40px;
            height: 40px;
            background-color: #f2f2f2;
            border-radius: 10px;
            position: absolute;
        }

        .link_img {
            height: 20px;
            width: 20px;
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto auto;
        }

        ul {
            padding: 0;
        }

        li {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 5px;
        }

        li p {
            margin-left: 30px;
            color: rgba(34, 34, 34, 0.5);
        }

        @media screen and (max-width: 1000px) {
            .profile_container,
            .info,
            .back {
                margin: 60px 33px 0;
            }

            .profile_container {
                flex-direction: column;
            }

            .profile_img_section {
                margin: 0 auto;
            }

            .profile_img-LG {
                width: 300px;
                height: 300px;
                border-radius: 100%;
            }

            .flag_wrapper {
            }

            .profile_desc_section {
                margin-left: 0;
                margin-bottom: 10px;
                margin-top: -40px;
            }

            .info {
                margin-top: 10px;
                margin-left: 33px;
            }
        }

    </style>
</head>
<body>

<div id="box">

    <div>
        <img width="60px" src="./img/husky_tran.png" alt="logo" style="display: inline-block;margin-left: 20px"/>
        <p class="back" @click="gobefore" id="back"
           style="display: inline-block;transform: translateY(10px);transform: translateX(-30px)">
            <i class="fas fa-long-arrow-alt-left" style="margin-left: 0;"></i>
            返回
        </p></div>
    <div>
        <section class="profile_container">
            <div class="profile_img_section">
                <!--        <img class="" src="./img/p1.png"/>-->
                <img id="movieimage" width="270px" :src="movie.cover_url" referrerpolicy="no-referrer" class=""
                     alt="movie_pic">
                <div class="container">
                    <img class="background" :src="movie.cover_url">
                </div>
                <div class="flag_wrapper">
                    <div class="score">{{movie.score}}</div>
                    <!--            <img class="flag" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/flag-south-korea_1f1f0-1f1f7.png" alt="South Korean Flag" />-->
                </div>
            </div>

            <div class="profile_desc_section">
                <h2 id="titlename" style="margin-top: 50px">{{ movie.title }}</h2>

                <div class="" style="margin-bottom: 15px">

                    <div class="btn-group btn-group-sm" style="transform:scale(1.2,1.2)">
                        <button class="button"
                                @click="buttonclick_up($event)">
                            <div class="emitter"></div>
                            <div class="hand">
                                <div class="thumb"></div>
                            </div>
                        </button>

                        <button class="button"
                                @click="buttonclick_down($event)"
                                style="transform: rotate(180deg);margin-left: -10px">
                            <div class="emitter"></div>
                            <div class="hand">
                                <div class="thumb"></div>
                            </div>
                        </button>
                        <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_up(items)">👍-->
                        <!--                                                </button>-->
                        <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_down(items)">👎-->
                        <!--                                                </button>-->
                    </div>
                    <!--                                <small class="text-muted">9 mins</small>-->
                </div>
                <p id="details" class="description">{{ info }}</p>

                <div class="interests" id="classfier">
                    <span class="interests_item" v-for="items in movietags">{{items}}</span>
                    <!--            <span class="interests_item">Management</span>-->
                    <!--            <span class="interests_item">Leadership</span>-->
                </div>
            </div>

        </section>

        <div class="info" id="infos">
            <ul>
                <li>
                    <div class="link_img_wrapper">
                        <img class="link_img"
                             src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/man-curly-hair_1f468-200d-1f9b1.png"
                             alt="">
                    </div>
                    <p style="margin-left: 50px;margin-top: 15px">{{director}}</p>
                </li>
                <li>
                    <div class="link_img_wrapper">
                        <img class="link_img"
                             src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/emojidex/112/female-artist_1f469-200d-1f3a8.png"
                             alt="">
                    </div>
                    <p style="margin-left: 50px;margin-top: 15px">{{actors}}</p>
                </li>
                <li>
                    <div class="link_img_wrapper">
                        <img class="link_img"
                             src="http://pic.rofc.online/2021.07.20-01:23:29.png"
                             alt="">
                    </div>
                    <p style="margin-left: 50px;margin-top: 15px" @click="gotodouban">还有{{vote_count}}条评论，点我去豆瓣看看！</p>
                </li>
            </ul>
        </div>

        <div style="margin-left: 4vw">
            <div class="emoji  emoji--like" style="transform:scale(0.6,0.6);margin-right: -40px">
                <div class="emoji__hand">
                    <div class="emoji__thumb"></div>
                </div>
            </div>
            <div class="emoji  emoji--love" style="transform:scale(0.6,0.6);margin-right: -40px">
                <div class="emoji__heart"></div>
            </div>
            <div class="emoji  emoji--haha" style="transform:scale(0.6,0.6);margin-right: -40px">
                <div class="emoji__face">
                    <div class="emoji__eyes"></div>
                    <div class="emoji__mouth">
                        <div class="emoji__tongue"></div>
                    </div>
                </div>
            </div>
            <div class="emoji  emoji--yay" style="transform:scale(0.6,0.6);margin-right: -40px">
                <div class="emoji__face">
                    <div class="emoji__eyebrows"></div>
                    <div class="emoji__mouth"></div>
                </div>
            </div>
            <div class="emoji  emoji--wow" style="transform:scale(0.6,0.6);margin-right: -40px">
                <div class="emoji__face">
                    <div class="emoji__eyebrows"></div>
                    <div class="emoji__eyes"></div>
                    <div class="emoji__mouth"></div>
                </div>
            </div>
            <div class="emoji  emoji--sad" style="transform:scale(0.6,0.6);margin-right: -40px">
                <div class="emoji__face">
                    <div class="emoji__eyebrows"></div>
                    <div class="emoji__eyes"></div>
                    <div class="emoji__mouth"></div>
                </div>
            </div>
            <div class="emoji  emoji--angry" style="transform:scale(0.6,0.6);margin-right: -40px">
                <div class="emoji__face">
                    <div class="emoji__eyebrows"></div>
                    <div class="emoji__eyes"></div>
                    <div class="emoji__mouth"></div>
                </div>
            </div>
        </div>

        <div v-if="others_like_exist">
            <p style="margin-left: 7vw;color: #8a8a8a;font-size: large">喜欢该电影的人也喜欢：</p>
            <div class="row row-cols-2 row-cols-sm-1 row-cols-md-2 row-cols-lg-6" style="margin-left: 6vw">

                <div class="col" v-for="items in forYou" :key="items.id">

                    <div class="father gray card shadow-sm">
                        <!--                            <img width="100%" src="./img/p1.png" />-->
                        <img width="100%" :src="items.cover_url" referrerPolicy="no-referrer"
                             class="rounded"
                             alt="cover"
                             @click="getdetail(items)">
                        <!--                                        <button class="button"-->
                        <!--                                                @click="buttonclick_up($event,items)">-->
                        <!--                                            <div class="emitter"></div>-->
                        <!--                                            <div class="hand">-->
                        <!--                                                <div class="thumb"></div>-->
                        <!--                                            </div>-->
                        <!--                                        </button>-->

                        <!--                                        <button class="button"-->
                        <!--                                                @click="buttonclick_down($event,items)"-->
                        <!--                                                style="transform: rotate(180deg);margin-left: -15px">-->
                        <!--                                            <div class="emitter"></div>-->
                        <!--                                            <div class="hand">-->
                        <!--                                                <div class="thumb"></div>-->
                        <!--                                            </div>-->
                        <!--                                        </button>-->
                        <!--                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"-->
                        <!--                             xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"-->
                        <!--                             preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>-->
                        <!--                            <rect width="100%" height="100%" fill="#55595c"/>-->
                        <!--                            &lt;!&ndash;                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>&ndash;&gt;-->
                        <!--                        </svg>-->
                        <div class="card-body">
                            <!--                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to-->
                            <!--                                additional content. This content is a little bit longer.</p>-->
                            <div class="d-flex flex-column justify-content-between align-items-center">

                                <div style="color: #222529;margin-top: 0;margin-bottom: 10px;font-size: large"
                                     class="fw-normal">{{ items.title }}
                                </div>
                                <div class="btn-group btn-group-sm">
                                    <button id="button_3" class="button"
                                            @click="buttonclick_up($event,items)">
                                        <div class="emitter"></div>
                                        <div class="hand">
                                            <div class="thumb"></div>
                                        </div>
                                    </button>

                                    <button id="button_4" class="button"
                                            @click="buttonclick_down($event,items)"
                                            style="transform: rotate(180deg);margin-left: -10px">
                                        <div class="emitter"></div>
                                        <div class="hand">
                                            <div class="thumb"></div>
                                        </div>
                                    </button>
                                    <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_up(items)">👍-->
                                    <!--                                                </button>-->
                                    <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_down(items)">👎-->
                                    <!--                                                </button>-->
                                </div>
                                <!--                                <small class="text-muted">9 mins</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <p style="margin-left: 8vw;color: #8a8a8a;font-size: small">detail content from Douban & Codepen</p>
        <p style="margin-left: 8vw;color: #8a8a8a;font-size: small">emoji content from Emojipedia</p>
        <p style="margin-left: 8vw;color: #8a8a8a;font-size: small">facepalm content from Facebook</p>

    </div>
</div>
<script>
    // document.getElementById("details").style.fontSize = "30px"
    // document.getElementById("titlename").style.fontSize = "100px"

    var vue = new Vue({
        el: "#box",
        data: {
            actors: '',
            director: '',
            douban_url: '',
            vote_count: '',
            movie_id: '27666513',
            ref: '',
            isLogin: 1, //是否登录，1为登录
            userName: 'HuskyUser', //缺省用户名
            userToken: '',
            titleName: "妖精的尾巴", //首页大图电影名称
            movie: '',
            movietags: [],
            info: '',
            description: '',
            forYou: [],
            others_like_exist: 0,
        },
        // 事件对象的行为
        methods: {
            buttonclick_up(e) {
                console.log(e);
                e.currentTarget.nextElementSibling.classList.remove("liked");
                // console.log(it);
                this.thumbs_up();
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 160);
                }
            },
            buttonclick_down(e) {
                console.log(e);
                e.currentTarget.previousElementSibling.classList.remove("liked");
                // console.log(it);
                this.thumbs_down();
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");

                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 160);
                }
            },
            thumbs_up() {
                console.log("调用了thumbs_up");
                // console.log(e);
                // let position = 2;
                let movie_id = this.movie_id;

                console.log(this.userName);
                console.log(this.userToken);
                var thumbsUp = new FormData()
                thumbsUp.append('username', this.userName);
                thumbsUp.append('token', this.userToken);
                thumbsUp.append('movie_id', movie_id);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/favor/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: 'http://124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: thumbsUp,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        alert(res.data.msg);
                        // window.location.href = "login.html";
                    } else {
                        console.log(res.data);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            thumbs_down() {
                // console.log(e);
                let movie_id = this.movie_id;
                console.log(this.userName);
                console.log(this.userToken);
                var thumbsDown = new FormData()
                thumbsDown.append('username', this.userName);
                thumbsDown.append('token', this.userToken);
                thumbsDown.append('movie_id', movie_id);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/unfavor/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: 'http://124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: thumbsDown,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        alert(res.data.msg);
                        // window.location.href = "login.html";
                    } else {
                        console.log(res.data);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            gobefore: function () {
                console.log(this.ref)
                if (this.ref === '1') {
                    window.location.href = "recommend.html";
                }
                if (this.ref === '2') {
                    window.location.href = "search.html";
                }
            },
            add: function () {
                this.buyNum++
            },
            sub: function () {
                this.buyNum--
            },
            gotodouban: function () {
                window.location.href = this.douban_url;
            }

        },
        // slicewords: function (e){
        //     return e.slice(3, e.length - 2);
        // },

        mounted: function () {
            if (document.body.clientWidth < 1000) {
                console.log("doing")
                // document.getElementById("h2").style.fontSize = "50px"
                document.getElementById("details").style.fontSize = "40px"
                document.getElementById("titlename").style.fontSize = "80px"
                document.getElementById("classfier").style.fontSize = "30px"
                document.getElementById("infos").style.fontSize = "40px"
                document.getElementById("movieimage").style.width = "400px"
                document.getElementById("back").style.fontSize = "40px"
                // document.body.style.fontSize = "20px"

            }

            // document.getElementById("title").innerHTML = this.titleName;

            // "27666513"
            let locals = localStorage.getItem('userdata');
            let movieId = localStorage.getItem('movieId');
            let ref = localStorage.getItem('ref');
            movieId = JSON.parse(movieId);
            this.movie_id = movieId;
            this.ref = ref;
            console.log('ref:' + this.ref)

            console.log(this.movie_id)

            // console.log(search_str);
            userData = JSON.parse(locals);
            this.userName = userData.username
            this.userToken = userData.token
            console.log('before:' + this.isLogin)
            if (this.userName.length > 0) {
                this.isLogin = 1;
                console.log('after:' + this.isLogin)
            }

            console.log(this.userName);
            console.log(this.userToken);
            // console.log(search_str);

            var detailData = new FormData()

            detailData.append('username', this.userName);
            detailData.append('token', this.userToken);
            detailData.append('movie_id', this.movie_id);


            var loginVerify = new FormData()

            loginVerify.append('username', this.userName);
            loginVerify.append('token', this.userToken);

            var host = 'http://124.70.36.92:19132/';
            var url_welcome = host + 'authorities/welcome/'

            axios({
                method: 'POST',
                url: url_welcome,
                dataType: 'json',
                data: loginVerify,
            }).then(res => {
                if (res.data.msg === '') {
                    // alert(res.data.msg);
                    console.log(res.data);
                    this.isLogin = 1;

                } else {
                    window.location.href = "login.html";
                }
            }).catch(err => {
                console.log(err)
            })

            var url_detail = host + 'authorities/movieinfo/'

            axios({
                method: 'POST',
                url: url_detail,
                // url: 'http://124.70.36.92:19132/polls/login/',
                dataType: 'json',
                data: detailData,
            }).then(res => {
                if (res.data.msg === '非法访问') {
                    // alert(res.data.msg);
                    // window.location.href = "login.html";
                } else {
                    console.log(res.data);
                    this.movie = res.data.data;
                    this.movietags = res.data.data.tags;
                    this.movietags = this.movietags.slice(8, this.movietags.length - 2);
                    this.movietags = this.movietags.split("', '");

                    this.actors = this.movie.actors.slice(2, this.movie.actors.length - 2);
                    this.actors = this.actors.replace(/', '/g, ", ");
                    this.director = this.movie.director;
                    this.douban_url = this.movie.url;
                    this.info = this.movie.info_summary;
                    this.vote_count = res.data.data.vote_count;

                    console.log("others:")
                    console.log(res.data.others)
                    this.forYou = res.data.others;

                    if (res.data.others.length > 0) {
                        this.others_like_exist = 1;
                    } else {
                        this.others_like_exist = 0;
                    }
                    // console.log(this.actors);

                    // console.log(this.slicewords(this.movie.actors))


                    console.log(this.movietags)
                }
            }).catch(err => {
                console.log(err)
            })
        },

        // 计算调用的
        computed: {
            total: function () {
                // this表示的是vue对象
                return this.price * this.buyNum
            },
            baoyou: function () {
                return this.buyNum >= 10 ? "包邮" : "不包邮"
            }

        },
        // 监听 数据的变化
        watch: {
            buyNum: function (newVlaue, oldVlue) {
                console.log(newVlaue + "----" + oldVlue)
                if (newVlaue > this.storage || newVlaue < 0) {
                    this.buyNum = oldVlue
                }
            }
        }

    })

</script>

</body>
</html>